<template>
  <div class="topicDetails basePageBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/topic' }">专题</el-breadcrumb-item>
      <el-breadcrumb-item>专题详情</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="topicDetails-info">
      <img
        class="topicImg"
        :src="$getImageUrl(courseData.originImg)"
        alt=""
      />
      <!-- <img class="topicImg" src="../../assets/course1.png" alt="" /> -->
      <div class="topic-right">
        <div class="areaInfo">
          <div>
            <div class="title">
              专题：
              {{ courseData.name }}
              <!-- <div class="type">通识课程 / 备课技巧</div> -->
            </div>
            <div class="other">
              <!-- <div class="look">
                <img src="" alt="" srcset="" />
                {{ courseData.joins }}人学习
              </div>
              <div class="line"></div> -->
              <div class="status">已完结</div>
              <div class="line"></div>
              <div class="time">{{ courseData.updateTime }}</div>
            </div>
          </div>

          <div class="funsBtn">
            <div class="funsBtn-item" @click="setVoteCourseFn">
              <img
                v-if="!isVote"
                src="@/assets/like_icon.png"
                alt=""
                srcset=""
                
              />
              <img
                v-if="isVote"
                src="@/assets/like_select.png"
                alt=""
                srcset=""
              />
              {{ likes || 0 }}
            </div>
            <!-- <div class="funsBtn-item">
              <img src="../../assets/share.png" alt="" />
              分享
            </div> -->
            <el-popover placement="bottom-start" width="400" trigger="hover">
              <div class="relayArea">
                <el-input
                  ref="inputToCopy"
                  v-model="textToCopy"
                  readonly
                  placeholder="这里将显示要复制的文本"
                ></el-input>
                <el-button type="primary" @click="copyToClipboard"
                  >复制链接</el-button
                >
              </div>
              <img
                src="@/assets/relay.png"
                alt=""
                srcset=""
                slot="reference"
                style="width: 22px; margin-left: 15px"
              />
            </el-popover>
          </div>
        </div>
        <div class="topicIntroduce">
          <div class="courseTitle introduceTitle">简介：</div>
          <div class="courseText" v-html="courseData.description"></div>
        </div>
        <!-- <div class="teachers">讲师：{{ courseData.speaker || '无' }}</div> -->
      </div>
    </div>

    <div class="courseData">
      <div class="courseData-left">
        <div>{{ courseList.length || 0 }}项课程</div>
        <div class="line" />
        <div class="count">
          <img src="@/assets/users.png" alt="" />
          {{ courseData.joins || 0 }}人学习
        </div>
      </div>
      <div class="courseData-right">
        <!-- 排序 -->
        <div class="sortArea">
          <div class="sortLeft">
            <div
              class="sortItem"
              v-for="(item, index) in sortData"
              :key="'sort' + index"
            >
              <div v-if="index !== 0" class="line"></div>
              <div
                :class="sortVal === item.value ? 'active' : ''"
                @click="changeSort(item.value)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="courseList">
      <CourseCard
        class="courseCard"
        v-for="(item, index) in courseList"
        :key="'training' + index"
        :cardData="item"
      ></CourseCard>
    </div>

  </div>
</template>
<script>
import CourseCard from "@/components/CourseCard.vue";
import { copyToClipboard } from "@/utils";
import { toLogin } from "@/utils/baseConfig";
import {  getToken } from '@/utils/auth';
import {
  voteCourse,
  getVoteStatusById,
  unVoteCourse,
  getLikesCountById,
} from "@/api/course";
// import CustomButton from "@/components/CustomButton.vue";
// import { getCourseDetails } from "@/api/course";
import {
  getTopicTypeList,
  getTopicCourseByTopicId,

} from "@/api/topic";
export default {
  name: "Coures",
  components: {
    CourseCard,
    // CustomButton,
  },
  props: {
    // sortData: {
    //   type: Array,
    //   default: function () {
    //     return [
    //       {
    //         name: "综合排序",
    //         value: "0",
    //       },
    //       {
    //         name: "最新",
    //         value: "1",
    //       },
    //       {
    //         name: "最热",
    //         value: "2",
    //       },
    //     ];
    //   },
    // },
    // sortVal: {
    //   type: String,
    //   default: "0",
    // },
  },
  data() {
    return {
      objectId: null,
      courseData: {},
      courseList: [],
      likes: 0,
      // 分页
      searchForm: {
        currentPage: 1,
        pageSize: 16,
        totalCount: 200,
      },
      // 排序
      sortData: [
        {
          name: "综合排序",
          value: "ALL",
        },
        {
          name: "最新",
          value: "CREATE_TIME",
        },
        {
          name: "最热",
          value: "JOINS",
        },
      ],
      sortVal: "ALL",
      isVote: false, // 点赞
      textToCopy: window.location.href,
    };
  },
  computed: {
    isLogin() {
      return !!getToken();
    },
  },
  beforeMount() {
    this.objectId = this.$route.query.objectId;
    console.log(this.objectId);
  },
  mounted() {
    this.getData();
    this.getTopicCourseList(this.objectId);
      this.getVoteStatusById(this.objectId);
  
    this.getLikesCountById(this.objectId);
  },
  methods: {
    // 获取专题详情
    async getData() {
      let params = {
        objectId: this.objectId,
      };
      const resData = await getTopicTypeList(params);
      console.log(resData);
      this.courseData = resData;
    },

    // 获取专题课程
    async getTopicCourseList(id) {
      try {
        let params = {
          objectId: id,
        };
        const resData = await getTopicCourseByTopicId(params);
        this.courseList = resData || [];
        // if (this.topiceTypeList.length !==0) {
        //   this.$refs.search.activeName = this.topiceTypeList[0].categoryId
        // }
        console.log(resData);
      } catch (error) {
        console.error(error);
      }
    },

    // 处理当前页变化的逻辑
    handleCurrentChange(newPage) {
      console.log(newPage);
    },

    // 改变排序
    changeSort(val) {
      this.sortVal = val;
      console.log(val);

      let sortedList = [];

      if (this.sortVal === "CREATE_TIME") {
        sortedList = this.courseList
          .slice()
          .sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
      } else if (this.sortVal === "JOINS") {
        sortedList = this.courseList.slice().sort((a, b) => b.joins - a.joins);
      } else {
        sortedList = this.courseList.slice();
      }
      this.courseList = sortedList;
      console.log(this.courseList);
    },

  

    // 复制
    copyToClipboard() {
      copyToClipboard(this.textToCopy);
    },

    // 获取点赞数
    async getLikesCountById(id) {
      try {
        let params = {
          courseId: id,
        };
        const resData = await getLikesCountById(params);
        this.likes = resData;
      } catch (error) {
        console.error(error);
      }
    },

    // 获取是否已经点赞
    async getVoteStatusById(id) {
      try {
        let params = {
          courseId: id,
        };
        const resData = await getVoteStatusById(params);
        this.isVote = resData;
      } catch (error) {
        console.error(error);
      }
    },
    // 专题点赞
    async setVoteCourseFn() {
      if (!this.isLogin) {
        return toLogin();
      }
      try {
        let params = {
          courseId: this.objectId,
        };
        if (this.isVote) {
          await unVoteCourse(params);
          this.isVote = false;
          this.likes = this.likes - 1;
        } else {
          await voteCourse(params);
          this.isVote = true;
          this.likes = this.likes + 1;
        }
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.topicDetails {
  box-sizing: border-box;
  // width: 100%;
  margin-top: 30px;

  .el-breadcrumb {
    margin: 24px 0 24px;
  }

  &-info {
    box-sizing: border-box;
    width: 100%;
    // height: 274px;
    height: 320px;
    display: flex;
    justify-content: space-between;
    // padding: 14px 12px 32px;
    padding: 14px 0 32px;
    background-color: #fff;
    .topicImg {
      width: 455px;
      height: 274px;
    }

    .topic-right {
      width: calc(100% - 479px);
      height: 274px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .areaInfo {
        box-sizing: border-box;
        width: 100%;
        // height: 109px;
        // padding-top: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32px;
        // padding: 0 30px;
        .funsBtn {
          padding: 10px 34px;
          display: flex;
          align-items: center;

          &-item {
            display: flex;
            align-items: center;
            margin-left: 30px;
            img {
              width: 22px;
              margin-right: 5px;
              cursor: pointer;
            }
          }
        }

        .title {
          height: 28px;
          display: flex;
          align-items: center;
          color: $text-title-color;
          font-size: 20px;
          font-weight: 600;

          .type {
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            color: $text-color;
            margin-left: 12px;
          }
        }
        .other {
          display: flex;
          align-items: center;
          margin-top: 8px;
          .look,
          .status,
          .time {
            font-size: 14px;
            font-weight: 400;
            color: $text-color;
          }
          .line {
            width: 1px;
            height: 12px;
            background-color: #c6c6c6;
            margin: 0 8px;
          }
        }
      }
      .topicIntroduce {
        box-sizing: border-box;
        width: 100%;
        height: 106px;
        overflow: hidden;
        // height: 200px;
        padding: 0 30px 0 0;

        .courseTitle {
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 12px;
        }
        .courseText {
          width: 100%;
          max-height: 250px;
          overflow: hidden;
          text-indent: 2em;
          margin-bottom: 20px;
          font-size: 16px;
          color: #8c8c8c;
        }
        .introduceTitle {
          // margin-top: 20px;
        }
      }
      .teachers {
        font-size: 14px;
        color: #8c8c8c;
      }
    }
  }

  // .bannerBg {
  //   width: 100%;
  //   height: 300px;
  //   padding: 0 30px;
  // }

  .courseData {
    box-sizing: border-box;
    width: 100%;
    // padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: $text-color-secondary;
    margin: 32px 0 24px;

    &-left {
      display: flex;
      align-items: center;
      padding-left: 12px;
      color: #3e3e3e;
      .line {
        width: 1px;
        height: 16px !important ;
        border-right: 1px solid #8c8c8c;
        height: 16px;
        margin: 0 8px;
      }
      .count {
        display: flex;
        align-items: center;

        // margin-left:8px;
        img {
          margin-right: 4px;
        }
      }
    }
    &-right {
      // width: 240px;
      display: flex;
      align-items: center;
      .sortArea {
        // padding-top: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // margin-right: 50px;
        .sortLeft {
          display: flex;
          align-items: center;
          padding-right: 12px;
          .sortItem {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            color: $text-color-secondary;
            cursor: pointer;

            .line {
              width: 1px;
              height: 20px;
              margin: 0 20px;
              background: #e2e2e2;
            }

            .active {
              color: $text-color-primary;
            }
          }
        }
      }
    }
  }
  .courseList {
    box-sizing: border-box;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 24px;
    margin-bottom: 32px;
    // padding: 20px 30px;
  }
}

.el-pagination {
  text-align: center;
  margin-bottom: 20px;
}
.relayArea {
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  .el-button {
    // margin-left: 5px;
  }
}
</style>
